<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/@hpcc-js/wasm/dist/graphviz.umd.js" type="javascript/worker"></script>
<script src="../build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

var shapes = [
  "box",
  "polygon",
  "ellipse",
  "oval",
  "circle",
  "point",
  "egg",
  "triangle",
  "none",
  "plaintext",
  "plain",
  "diamond",
  "trapezium",
  "parallelogram",
  "house",
  "pentagon",
  "hexagon",
  "septagon",
  "octagon",
  "note",
  "tab",
  "folder",
  "box3d",
  "component",
  "cylinder",
  "rect",
  "rectangle",
  "square",
  "doublecircle",
  "doubleoctagon",
  "tripleoctagon",
  "invtriangle",
  "invtrapezium",
  "invhouse",
  "underline",
  "Mdiamond",
  "Msquare",
  "Mcircle",
  /* biological circuit shapes, as specified by SBOLv*/
  /** gene expression symbols **/
  "promoter",
  "cds",
  "terminator",
  "utr",
  "insulator",
  "ribosite",
  "rnastab",
  "proteasesite",
  "proteinstab",
  /** dna construction symbols **/
  "primersite",
  "restrictionsite",
  "fivepoverhang",
  "threepoverhang",
  "noverhang",
  "assembly",
  "signature",
  "rpromoter",
  "larrow",
  "rarrow",
  "lpromoter",
  /*  *** shapes other than polygons  *** */
  "record",
  "Mrecord",
  "epsf",
  "star",
];

dotSrc = 'graph {\n';

for (i in shapes) {
    dotSrc += '    ' + shapes[i] + ' [shape="' + shapes[i] + '"]\n';
}

dotSrc += '}';

d3.select("#graph").graphviz()
    .engine('circo')
    .renderDot(dotSrc);

</script>
